<template>
    <div>
        <div class="title">
            <el-input maxlength="15" style="width:240px;" placeholder="搜索关键词" v-model="search">
                <el-button slot="suffix" @click="searchData" type="primary" icon="el-icon-search" style="border-radius:0 4px 4px 0;margin-right:-5px">搜索</el-button>
            </el-input>
        </div>
        <div class="data">
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
                <el-table-column prop="userName" label="运营者姓名" align="center" min-width="50"></el-table-column>
                <el-table-column prop="userMobile" label="运营者手机" align="center" min-width="80"></el-table-column>
                <el-table-column prop="operatorName" label="代理商姓名" align="center" min-width="120"></el-table-column>
                <el-table-column prop="operatorMobile" label="代理商手机" align="center" min-width="120"></el-table-column>
                <el-table-column label="操作" align="center" min-width="100">
                    <template slot-scope="scope">
                        <div class="editCell">
                            <i style="cursor: pointer;" @click="deteteHandlet(scope.row)" >删除</i>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    :total="total"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
    import {getUserOperators,deleteOpertaors} from '@/api/operator'

    export default {
        data() {
            return {
                search: '',
                tableData: [],
                loading: true,
                page: 1,
                pageSize: 10,
                total: 0
            }
        },
        created() {
            this.getDataList()
        },
        methods: {
            searchData() {
                this.page = 1
                this.getDataList()
            },
            getDataList() {
                this.loading = true
                let param = {
                    keyWord: this.search,
                    pageNo: this.page,
                    pageSize: this.pageSize
                }
                getUserOperators(param).then(res => {
                    if (res.data.records.length >= 0) {
                        this.tableData = [...res.data.records]
                        this.total=res.data.total
                    }

                    this.loading = false
                })
            },
            handleCurrentChange(val) {
                this.page = val
                this.getDataList()
            },
            deteteHandlet(row) {
                this.$confirm('确定删除所选项吗?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let param = {
                        id: row.id
                    }
                    deleteOpertaors(param).then(res => {
                        if (res.message.code == 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            })
                            this.getDataList()
                        } else {
                            this.$message.error(res.data)
                        }
                    })
                })
            }
        }
    }
</script>
<style scoped>
    .title {
        margin-left: 20px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
    }

    .data {
        margin-left: 20px;
        margin-top: 20px;
        margin-right: 10px;
    }
</style>
